<template>
	<view class="bannerTitles relative">
		<image
			mode="aspectFill"
			class="bannerTitles-bg inherit"
			:src="baseUrl + info?.images" />
		<view class="bannerTitles-title absolute">{{ info?.title }}</view>
		<view class="bannerTitles-ds absolute">{{ info?.title_fu }}</view>
	</view>

	<view class="operation flex space-between align-items_center">
		<view class="operation-item" @click="confirmPermission(0)">
			<image mode="aspectFill" src="https://aph.junhecms.com/image/homePage/4.png" />
			<view>免费试用</view>
		</view>
		<view class="operation-item" @click="confirmPermission(1)">
			<image mode="aspectFill" src="https://aph.junhecms.com/image/homePage/5.png" />
			<view>申请演示</view>
		</view>
		<view class="operation-item" @click="connection">
			<image mode="aspectFill" src="https://aph.junhecms.com/image/homePage/6.png" />
			<view>联系我们</view>
		</view>
		<view class="operation-item" v-if="videoRule" @click="videoShow">
			<image mode="aspectFill" src="https://aph.junhecms.com/image/homePage/7.png" />
			<view>视频演示</view>
		</view>
	</view>

	<view class="map" v-if="info?.sy">
		<view class="maxTitle">商业场景</view>
		<view class="richText">
			<u-parse :content="info?.sy"></u-parse>
		</view>
	</view>

	<view class="business" v-if="info?.ywjson && info?.ywjson.length > 0">
		<view class="maxTitle">业务挑战</view>
		<u-gap height="20rpx"></u-gap>
		<view class="flex business-item" v-for="(yw, ywIndex) in info?.ywjson" :key="ywIndex">
			<image mode="aspectFill" :src="baseUrl + yw.image" />
			<view class="business-item-cont">
				<view>{{ yw.title }}</view>
				<view>
					{{ yw.desc }}
				</view>
			</view>
		</view>
	</view>

	<view class="map" style="background: #f5f5f5" v-if="info?.xz">
		<view class="maxTitle">我们如何协助</view>
		<view class="richText">
			<u-parse :content="info?.xz"></u-parse>
		</view>
	</view>

	<view class="product" v-if="info?.gn && info?.gn.length > 0">
		<view class="maxTitle">产品功能</view>
		<view class="product-item" v-for="(item, index) in info?.gn" :key="index">
			<image mode="aspectFill" :src="baseUrl + item.image" />
			<view class="product-item-title">{{ item.title }}</view>
			<view>
				{{ item.desc }}
			</view>
		</view>
	</view>

	<view class="case" v-if="info?.aljson && info?.aljson.length > 0">
		<view class="maxTitle">应用案例</view>
		<view class="case-item" v-for="(al, alIndex) in info?.aljson" :key="alIndex">
			<image mode="aspectFill" :src="baseUrl + al.image" />
			<view class="case-item-title omit">{{ al.title }}</view>
			<view>
				{{ al.desc }}
			</view>
		</view>
	</view>

	<view class="commerce" v-if="info?.jz && info?.jz.length > 0">
		<view class="maxTitle">商业价值</view>
		<view class="commerce-item" v-for="(item, index) in info?.jz" :key="index">
			<view>{{ item.title }}</view>
			<view>
				{{ item.desc }}
			</view>
		</view>
	</view>

	<view class="contact">
		<view class="maxTitle">联系产品/解决方案团队</view>
		<!--  有权限  -->
		<view
			v-if="permission"
			class="relative"
			:class="{ 'contact-area': item.length > 0 }"
			v-for="(item, index) in teamList"
			:key="item">
			<view v-if="item.length > 0">
				<view class="contact-area-district">{{ areaTitle(index) }}</view>
				<view
					class="contact-area-item"
					v-for="child in item"
					:key="child.id"
					:style="{
						marginTop: item === 1 ? '0rpx' : '60rpx'
					}">
					<view class="contact-area-item-title">{{ child.name }}</view>
					<view class="contact-area-item-detail">
						<view>职位：{{ child.poster }}</view>
						<view>电话：{{ child.phone }}</view>
						<view>邮箱：{{ child.email }}</view>
					</view>
				</view>
			</view>
		</view>

		<!--  无权限  -->
		<view class="contact-noPermission flex-center" v-else @click="popUpTips">
			<image mode="aspectFill" src="@/static/2.png" />
			<view>
				<text>提交公司信息</text>
				后即可查看
			</view>
		</view>
	</view>

	<u-modal
		:show="permissionShow"
		:showCancelButton="true"
		width="600rpx"
		title="温馨提示"
		content="需要填写个人信息后才可查看团队联系方式"
		cancelColor="#707070"
		confirmColor="#D93954"
		cancelText="取消"
		confirmText="去填写"
		@confirm="confirmPermission(2)"
		@cancel="permissionShow = false"></u-modal>

	<share />
	<tabbar />
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { baseUrl } from '@/utils/tool.js';
import { post } from '@/utils/collect';

uni.setStorageSync('navTitle', '联盟生态');

const areaTitle = (index) => {
	if (index === 0) return '南区';
	else if (index === 1) return '北区';
	else if (index === 2) return '东区';
	else if (index === 3) return '西区';
	else if (index === 4) return '香港区';
};

const options = ref(null);
onLoad((options) => {
	if (options.id) _prodet(options.id);
	if (options.navTitle) {
		uni.setNavigationBarTitle({
			title: options.navTitle
		});
	}
});

onShow(() => {
	console.log('show');
	if (parseInt(uni.getStorageSync('corporation')) === 1) permission.value = true;
});

// 视频演示
const videoShow = () => {
	uni.navigateTo({
		url: '/homePage/video/index' + `?file=${info.value.file}`
	});
};

// 详情
const info = ref();
const teamList = ref([]);
const _prodet = (id) => {
	post('/index/prodet', { id }).then((res) => {
		info.value = res.data.data;
		uni.setNavigationBarTitle({
			title: res.data.data.title
		});
		uni.setStorageSync('navTitle', res.data.data.title);
		teamList.value = [
			res.data.team1,
			res.data.team2,
			res.data.team3,
			res.data.team4,
			res.data.team5,
			res.data.team6
		];
		if (res.data.data.file) videoRule.value = true;
		else videoRule.value = false;
	});
};

// 弹窗
const permissionShow = ref(false);
const popUpTips = () => (permissionShow.value = true);
const confirmPermission = (titleType) => {
	permissionShow.value = false;
	uni.navigateTo({
		url: '/homePage/corporation/index' + `?titleType=${titleType}`
	});
};

const connection = () => {
	uni.navigateTo({
		url: '/pages/us/index'
	});
};
// 是否提交公司信息
const permission = ref(false);

// 是否上传视频
const videoRule = ref(true);
</script>

<style scoped lang="scss">
.richText {
	margin-top: 30rpx;
	background: #fff;
	padding: 20rpx 35rpx;
	box-sizing: border-box;
}

.maxTitle {
	font-weight: bold;
	font-size: 36rpx;
	color: #7d7d7d;
	line-height: 42rpx;
}

.contact {
	background: #f5f5f5;
	padding: 60rpx 30rpx 36rpx;

	&-area {
		margin-top: 30rpx;
		background: #fff;
		padding: 30rpx 20rpx 44rpx;

		&:first-child {
			margin-top: 0rpx;
		}

		&-item {
			&-title {
				font-weight: bold;
				font-size: 36rpx;
				color: #2d2d2d;
			}

			&-detail {
				margin-top: 30rpx;

				view {
					font-weight: 400;
					font-size: 28rpx;
					color: #454545;
					line-height: 52rpx;
				}
			}
		}

		&-district {
			font-weight: 500;
			font-size: 30rpx;
			color: #d93954;
			position: absolute;
			top: 35rpx;
			right: 20rpx;
		}
	}

	&-noPermission {
		width: 690rpx;
		height: 200rpx;
		background: #ffffff;
		margin-top: 30rpx;

		view {
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;

			text {
				color: #d93954;
			}
		}

		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 18rpx;
		}
	}
}

.commerce {
	padding: 50rpx 30rpx 30rpx;

	&-item {
		margin-top: 30rpx;
		margin-bottom: 20rpx;

		view:last-child {
			font-weight: 300;
			font-size: 24rpx;
			color: #000000;
			margin-top: 10rpx;
		}

		view:first-child {
			font-weight: 500;
			font-size: 30rpx;
			color: #2d2d2d;
		}
	}
}

.case {
	padding: 60rpx 30rpx 34rpx;
	background: #f5f5f5;

	&-item {
		background: #fff;
		margin-top: 30rpx;

		view:last-child {
			font-weight: 300;
			font-size: 24rpx;
			color: #000000;
			padding: 30rpx 18rpx;
		}

		&-title {
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: var(--mainColor);
			font-weight: 500;
			font-size: 30rpx;
			color: #ffffff;
			text-align: center;
		}

		image {
			width: 690rpx;
			height: 400rpx;
			margin: 0rpx;
			padding: 0rpx;
		}
	}
}

.product {
	background: #f5f5f5;
	padding: 30rpx;

	&-item {
		background: #fff;
		margin-top: 30rpx;

		view:last-child {
			font-weight: 300;
			font-size: 24rpx;
			color: #000000;
			padding: 10rpx 20rpx 33rpx;
		}

		&-title {
			font-weight: 500;
			font-size: 30rpx;
			color: #2d2d2d;
			padding: 30rpx 20rpx 0rpx;
		}

		image {
			width: 690rpx;
			height: 450rpx;
		}
	}
}

.business {
	padding: 50rpx 30rpx;

	&-item {
		margin-top: 40rpx;

		&-cont {
			view:last-child {
				margin-top: 10rpx;
				font-weight: 300;
				font-size: 24rpx;
				color: #000000;
			}

			view:first-child {
				font-weight: 500;
				font-size: 30rpx;
				color: #2d2d2d;
			}
		}

		image {
			width: 60rpx;
			height: 60rpx;
			flex-shrink: 0;
			margin-right: 30rpx;
		}
	}
}

.map {
	background: #f5f5f5;
	padding: 40rpx 30rpx;
}

.operation {
	padding: 50rpx;

	&-item {
		text-align: center;

		view {
			font-weight: 500;
			font-size: 24rpx;
			color: #2d2d2d;
			line-height: 32rpx;
			margin-top: 20rpx;
		}

		image {
			width: 72rpx;
			height: 72rpx;
			margin: 0rpx auto;
		}
	}
}
</style>
